@import "ozaria/site/styles/common/variables"

@mixin editor-height($extraHeight)
  width: 98%
  @if $is-codecombat
    height: 83%
    height: unquote("-webkit-calc(100% - 100px -")$extraHeight unquote(")")
    height: unquote("calc(100% - 100px -")$extraHeight unquote(")")
  @else
    height: 88%
    height: unquote("-webkit-calc(88% - 50px -")$extraHeight unquote(")")
    height: unquote("calc(88% - 50px -")$extraHeight unquote(")")

@mixin ace
  .ace_editor
    // When Firepad isn't active, .ace_editor needs the width/height set itself.
    @include editor-height(0px)
    @if $is-codecombat
      margin-top: 10px
      width: calc(100% - 30px)
      line-height: 20px
      font-family: Monaco, Menlo, Ubuntu Mono, Consolas, "source-code-pro", monospace !important
    @else
      margin: 0
      width: 99%
      font-family: $code-font-style !important
      font-size: 16px
    position: relative
    background-color: transparent
    overflow: visible
    // https://github.com/codecombat/codecombat/issues/1411#issuecomment-60492750 -- trying to make sure system defaults don't mess up our monospace font.
    @include transition(height 0.25s ease-in-out)

    body[lang="he"] &, body[lang="ar"] &, body[lang="fa"] &, body[lang="ur"] &
      @if $is-codecombat
        font-family: "Cousine", "Courier", "Courier New", monospace !important
      @else
        font-family: $code-font-style !important

    &.disabled
      @include opacity(0.8)
      .ace_cursor, .executing, .ace_active-line, .ace_gutter-active-line
        @include opacity(0.1)

    .ace_gutter
      background-color: transparent
      border-right: 1px solid rgb(195, 178, 156)
      //background-color: rgba(255, 255, 255, 0.25)
      width: 47px
      margin-left: 4px
      @if not $is-codecombat
        padding-top: 3px

    // override ace visible to get the experimental large current line executing arrow visible
    .ace_gutter
      overflow: visible

    .ace_layer
      overflow: visible
    // End experiment....
    .ace_scroller
      background-color: transparent
      //padding-left: 10px  // Interrupts gutter and line highlighting
      @if not $is-codecombat
        margin-left: 10px // TODO: creates a white space/break in the line highlighting in code editor
        padding-top: 3px

    .ace_active-line, .ace_gutter-active-line
      background-color: rgba(255, 255, 255, 0.4)

    @if not $is-codecombat
      .ace_gutter-cell.ace_error
        background-image: url(/images/ozaria/level/error_icon.png) !important
        background-size: 40%

    .ace_content
      .executing, .executed, .problem-marker-info, .problem-marker-warning, .problem-marker-error, .problem-line
        position: absolute
    .executing
      // https://github.com/codecombat/codecombat/issues/6
      background-color: rgba(255, 255, 255, 0.75)
      @include gradient-striped()
      outline: 2px outset #0099ff
      @include box-shadow(1px 1px 4px black)
    &.playback-ended .executing, &.user-code-problem .executing
      background-color: rgba(50, 255, 80, 0.65)
      outline: 0
      @include box-shadow(0 0 0px black)
    .executed
      background-color: rgba(110, 110, 110, 0.12)

    +keyframes(pulseRedBackground)
      from
        background-color: rgba(255, 45, 27, 0.4)
      50%
        background-color: rgba(255, 45, 27, 0.2)
      to
        background-color: rgba(255, 45, 27, 0.4)

    // problem-marker-#{@aetherProblem.level} set in Problem.coffee
    .problem-marker-info
      background-color: rgba(196, 163, 184, 0.25)
    .problem-marker-warning
      background-color: rgba(100, 65, 20, 0.25)
    .problem-marker-error
      background-color: rgba(255, 45, 27, 0.5)
    .problem-line
      // TODO: Pulses too quickly during playback
      @include animation(pulseRedBackground 1s infinite)

    &:not(.playback-ended):not(.user-code-problem)
      .executing:not(.ace_gutter-cell)
        background-size: 40px 40px
        @include animation(progress-bar-stripes 0.5s linear infinite)

    &:not(.user-code-problem)
      .ace_gutter-cell.executing:not(.ace_error):not(.ace_warning):not(.ace_info)
        margin-left: 1px
        background-image: url()
        background-position: 0px center

    .ace_gutter-cell.executed:not(.ace_error):not(.ace_warning):not(.ace_info)
      margin-left: 1px
      background-image: url()
      background-position: 0px center

    @if $is-codecombat
      .ace_gutter-cell.entry-point:after
        content: " "
        display: block
        position: relative
        width: 49px
        top: -30px
        height: 38px
        overflow: visible

        background-image: url()

      .ace_gutter-cell.entry-point:not(.next-entry-point):after
        opacity: 0.5

      .ace_gutter-cell.entry-point.entry-point-indent-0:after
        // Ideally like -28px when gutter is 2 digits wide; this works even when gutter is 1 digit wide
        left: -34px
      .ace_gutter-cell.entry-point.entry-point-indent-4:after
        // Ideally like 2px when gutter is 2 digits wide; this works even when gutter is 1 digit wide
        left: -6px
      .ace_gutter-cell.entry-point.entry-point-indent-8:after
        // Ideally like 29px when gutter is 2 digits wide; this works even when gutter is 1 digit wide
        left: 22px
      .ace_gutter-cell.entry-point.entry-point-indent-12:after
        // Ideally like 59px when gutter is 2 digits wide; this works even when gutter is 1 digit wide
        left: 50px
      .ace_gutter-cell.entry-point.entry-point-indent-16:after
        // Ideally like 86px when gutter is 2 digits wide; this works even when gutter is 1 digit wide
        left: 78px

    .ace_gutter-cell.ace_error
      background-image: url()
    @if $is-codecombat
      .ace_gutter, .ace_gutter-layer
        // Ace sets this to 'strict', which would not paint yellow gutter arrows outside the gutter; this keeps the other three performance-enhancing contain values
        contain: size layout style

    .ace_marker-layer
      .ace_bracket
        // Override faint gray
        border-color: #BFF

      .locked-code
        border: 1px dashed rgba(53, 45, 34, 0.5)
        background-color: transparent
        @include transition(background-color 0.25s ease-in-out)

        &:after
          content: "Locked"
          opacity: 0
          display: block
          text-align: right
          @include transition(opacity 4s ease-in-out)
          font-size: 24px

        &.pulsating
          background-color: rgba(53, 45, 34, 0.5)

          &:after
            opacity: 1

    // Decided it wasn't useful to show what can be hovered, since almost anything can, so we have to make it too faint to be useful if we don't want it to be really distracting.
    //.ace_identifier
    //  border-bottom: 1px dotted rgba(0, 51, 255, 0.25)
    // TODO: differentiate variables from objects (possible?)
    // https://codecombat.slab.com/posts/code-editor-colors-accessibility-t1g8eh7w
    .ace_text-layer .ace_comment
      color: #697688

    .ace_text-layer .ace_function
      color: #1900AD

    .ace_text-layer .ace_keyword, .ace_text-layer .ace_operator
      color: #8B572A

    .ace_text-layer .ace_numeric, .ace_text-layer .ace_constant
      color: #CC0033

    .ace_text-layer .ace_type
      color: #8B572A

    .ace_text-layer .ace_string
      color: #B800B8

    .ace_text-layer .ace_support:not(.ace_function)
      color: #0A7159

    .ace_text-layer .ace_variable, .ace_text-layer .ace_identifier
      //color: #0165D0  // Oz variable color
      color: #8200FB  // Oz object name color

    .ace_text-layer .ace_invisible_space
      visibility: hidden

    .ace_search
      background-color: rgba(216, 187, 165, 1)
      border: 0
      @include box-shadow(1px 2px 1px #444)

      .ace_search_field
        width: 190px

      .ace_searchbtn, .ace_replacebtn
        padding: 0px 4px
